<template>
	<div class="d">
		<el-dialog :title="title" width="600px" :visible.sync="show" @open="openCallback">
			<div class="loading-view" v-loading="loading" element-loading-text="加载中" v-if="loading"></div>
			<el-form :model="form" ref="form" v-if="form && show">
				<el-form-item label="名称" :label-width="formLabelWidth">
					<el-input v-model="form.name" :disabled="disabled" clearable autocomplete="off" :placeholder="
              type == 'add' || type == 'edit' ? '请输入名称' : '暂无'
            "></el-input>
				</el-form-item>
				<el-form-item label="服务地址" :label-width="formLabelWidth">
					<el-input v-model="form.url" :disabled="disabled" clearable autocomplete="off" :placeholder="
              type == 'add' || type == 'edit' ? '请输入服务地址' : '暂无'
            "></el-input>
				</el-form-item>
				<el-form-item label="中心点" :label-width="formLabelWidth">
					<el-input v-model="form.center" :disabled="disabled" clearable autocomplete="off" :placeholder="
				      type == 'add' || type == 'edit' ? '请输入中心点' : '暂无'
				    "></el-input>
				</el-form-item>
				<el-form-item label="mapId" :label-width="formLabelWidth">
					<el-input v-model="form.mapId" :disabled="disabled" clearable autocomplete="off" :placeholder="
				      type == 'add' || type == 'edit' ? '请输入mapId' : '暂无'
				    "></el-input>
				</el-form-item>
				<el-form-item label="token" :label-width="formLabelWidth">
					<el-input v-model="form.token" :disabled="disabled" clearable autocomplete="off" :placeholder="
				      type == 'add' || type == 'edit' ? '请输入token' : '暂无'
				    "></el-input>
				</el-form-item>
				<el-form-item label="排序" :label-width="formLabelWidth">
					<el-input type="number" v-model="form.sort" :disabled="disabled" clearable autocomplete="off"
						:placeholder="
				      type == 'add' || type == 'edit' ? '请输入序号' : '暂无'
				    "></el-input>
				</el-form-item>
				<el-form-item label="上传文件" :label-width="formLabelWidth">
					<el-upload class="upload-demo" :disabled="disabled" :action="uploadUrl" :file-list="fileList"
						list-type="picture" :multiple="false" :limit="1"
						:headers="{ Accept: 'application/json, text/plain, */*, */*' }" name="inputFile"
						:data="uploadData" :on-success="uploadSuccess" :on-error="uploadError" :on-remove="removeFile">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">
							只能上传jpg/png文件，且不超过500kb
						</div>
					</el-upload>
					<el-input v-model="form.fileId" autocomplete="off" style="display: none"></el-input>
				</el-form-item>
				<el-form-item v-if="!disabled">
					<el-button type="primary" @click="submitForm('form')" :loading="submitting">{{ submitText }}
					</el-button>
					<el-button @click="show = false">取 消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	import {
		updateOrSave
	} from "@/api/otherMap/index.js";
	import {
		deepClone
	} from "@/utils/index";
	import {
		getToken
	} from "@/utils/auth";
	import {
		Notification
	} from "element-ui";
	const txt = "保存";
	const baseForm = {
		name: "",
		fileId: "",
		url: "",
		mapId: "",
		sort: 1,
		token: "",
		center:""
	}
	export default {
		name: "add",
		props: {
			item: Object,
			type: {
				type: String,
				default: "add",
			},
		},
		data() {
			return {
				title: "",
				show: false,
				loading: false,
				submitting: false,
				submitText: txt,
				form: baseForm,
				formLabelWidth: "80px",
				restaurants: [],
				typeLists: [],
				fileList: [],
				uploadUrl: process.env.VUE_APP_BASE_API + "/wcFile/upFile",
				uploadData: {
					token: getToken()
				},
				uoloadFileIds: [],
			};
		},
		computed: {
			disabled() {
				return this.type == "look";
			},
		},
		methods: {
			openCallback() {
				this.fileList = [];
				this.uoloadFileIds = [];
				this.form = deepClone(baseForm);
				switch (this.type) {
					case "add":
						this.title = "添加";
						break;
					case "edit":
						this.title = "编辑";
						this.form = deepClone(this.item);
						this.fileList = this.form.imageUrl ?
							this.form.imageUrl.map((item, index) => {
								return {
									name: item,
									url: item,
									id: this.form.fileId.split(",")[index],
								};
							}) : [];
						this.uoloadFileIds = this.form.fileId ? this.form.fileId.split(",") : [];
						break;
					case "look":
						this.title = "查看";
						break;
				}
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.submitting = true;
						this.submitText = "提交中";
						this.save();
					} else {
						return false;
					}
				});
			},
			async save() {
				this.form.fileId = this.uoloadFileIds.join(",");
				this.form.sort = this.form.sort ? this.form.sort : 1;
				delete this.form.imageUrl;
				try {
					const req = updateOrSave(this.form);
					const res = await req;
					setTimeout(() => {
						this.$emit("update");
						this.show = false;
					}, 500);
				} catch (error) {}
				this.submitText = txt;
				this.submitting = false;
			},
			uploadSuccess(response, file) {
				this.uoloadFileIds.push(file.response.data.id);
				Notification({
					title: "成功",
					message: "上传成功",
					type: "success",
				});
			},
			uploadError() {
				Notification({
					title: "失败",
					message: "上传失败",
					type: "error",
				});
			},
			removeFile(file, fileList) {
				switch (this.type) {
					case "add":
						this.uoloadFileIds = fileList.map((item) => item.response.data.id);
						break;
					case "edit":
						this.uoloadFileIds = fileList.map((item) => item.id);
						break;
					case "look":
						break;
				}
			},
		},
	};
</script>
<style scoped>
	>>>.el-select,
	>>>.el-autocomplete {
		width: 100%;
	}

	>>>.el-dialog {
		min-height: 400px;
	}

	.loading-view {
		position: absolute;
		position: absolute;
		left: 0;
		top: 50px;
		bottom: 0;
		right: 0;
	}
</style>
